import React  from 'react'
import {Switch,Route,NavLink} from 'react-router-dom'
import './Index.css'
import Home from '../Home/Home'
import Cate from '../Cate/Cate'
import Shop from '../Shop/Shop'
import Mine from '../Mine/Mine'


 const Index=()=> {
    return (
        <div className='index'>
        {/* 二级路由出口 */}
        <Switch>
            <Route path='/index/home' component={Home}></Route>

            <Route path='/index/cate' component={Cate}></Route>

            <Route path='/index/shop' component={Shop}></Route>

            <Route path='/index/mine' component={Mine}></Route>
        </Switch>
        <footer className='index-navs'>
            <NavLink to='/index/home'
            activeStyle={{background:'orangered'}}>首页</NavLink>
            <NavLink to='/index/cate'
            activeStyle={{background:'orangered'}}>分类</NavLink>
            <NavLink to='/index/shop'
            activeStyle={{background:'orangered'}}>购物车</NavLink>
            <NavLink to='/index/mine'
            activeStyle={{background:'orangered'}}>我的</NavLink>
        </footer>
    </div>
    )
}
export default Index;

